{extend name="public:base" /}
{block name="style"}
<style>
    .accessForm {
        padding: 10px;
    }
    .h30{
        height: 30px;
        line-height: 30px;
    }
</style>
{/block}
{block name="main-content"}
<div class="page-content">

    <div class="row">
        <div class="col-xs-12">
            <!-- 提示 -->
            <div class="row h30">
                <div class="col-xs-5">
                    <a href="{:url('admin/access/set')}"><span class="glyphicon glyphicon-plus addAccess">创建</span></a> &nbsp;
                    <a href="javascript:void(0);"><span class="glyphicon glyphicon-question-sign">帮助</span></a>
                </div>
                <div class="col-xs-7">

                </div>
            </div>

            <div class="row">

                <div class="col-xs-12">
                    <div class="table-responsive">
                        <table class="table table-bordered treeTable">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>权限名称</th>
                                <th>权限规则</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {empty name="list"}
                            <tr>
                                <td colspan="7">暂时没有数据</td>
                            </tr>

                            {else/}

                                {volist name="list" id="vo"}
                                <tr>
                                    <td>{$vo['id']}</td>
                                    <td>
                                        <span class="action-buttons">
                                            <a data-id="{$vo['id']}" href="javascript:void(0);" class="green bigger-140 show-details-btn" title="Show Details">
                                                <i class="ace-icon fa fa-angle-double-down"></i>
                                                <span class="sr-only">Details</span>
                                            </a>
                                        </span>
                                        {$vo['title']}</td>
                                    <td>{$vo['urls']}</td>
                                    <td>{php}echo app\common\model\BoolStatus::getLabelName($vo['status']);{/php}</td>
                                    <td>{$vo['created_time']}</td>
                                    <td>{$vo['updated_time']}</td>
                                    <td>
                                        <a href="{:url('admin/access/set','id='.$vo['id'])}" class="editAccess">编辑</a>
                                        <a href="#">删除</a>
                                    </td>
                                </tr>
                                {if condition="isset($vo['son']) && $vo['son']"}
                                    {foreach $vo['son'] as $son}
                                    <tr class="treeSub-{$vo['id']} hide">
                                        <td>{$son['id']}</td>
                                        <td>{if condition="$son['pid']"}|--{/if}{$son['title']}</td>
                                        <td>{$son['urls']}</td>
                                        <td>{php}echo app\common\model\BoolStatus::getLabelName($son['status']);{/php}</td>
                                        <td>{$son['created_time']}</td>
                                        <td>{$son['updated_time']}</td>
                                        <td>
                                            <a href="{:url('admin/access/set','id='.$son['id'])}" class="editAccess">编辑</a>
                                            <a href="#">删除</a>
                                        </td>
                                    </tr>
                                    {/foreach}
                                {/if}
                                {/volist}
                            {/empty}
                            </tbody>
                        </table>
                    </div>
                </div>


            </div>

            <!-- PAGE CONTENT ENDS -->
        </div><!-- /.col -->
    </div><!-- /.row -->
</div><!-- /.page-content -->
{/block}

{block name="scripts"}
<script type="text/javascript">

    $(document).ready(function () {
        var tree = [];
        $('.action-buttons a').on('mousedown', function(e){
            var id = $(this).data('id');

            console.log(tree[id]);

            if (typeof tree[id] != 'undefined' && tree[id]) {
                $('.treeSub-'+id).addClass('hide');
                $(this).find('.fa').addClass('fa-angle-double-down');
                $(this).find('.fa').removeClass('fa-angle-double-up');
                tree[id] = false;
            } else {
                $('.treeSub-'+id).removeClass('hide');
                $(this).find('.fa').addClass('fa-angle-double-up');
                $(this).find('.fa').removeClass('fa-angle-double-down');
                tree[id] = true;
            }

        });
    })



</script>
{/block}